<template>
  <div class="qup-full-page">
    <section>
      <search-form
        :search-config="searchConfig"
        :label-width="110"
        class="query-form"
        @clear="clearSearch"
        @search="handleSearch"
        @visible-change="$refs.refTable.refreshTableHeight()"
      />
      <table-box
        ref="refTable"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :other-params="otherParams"
        show-selection
        :off-set="0"
        @btnOperate="btnOperate"
        @selection-change="selectChange"
      >
        <el-table-column type="index" width="50" fixed label="序号" />
      </table-box>
    </section>
    <export-files v-if="exportVisible" title="导出" :config="exportConfig()" :visible.sync="exportVisible" />
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="urlList"
    />
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      exportVisible: false,
      searchConfig: [
        {
          label: '样板间任务编码',
          prop: 'modelRoomTaskCode',
          type: 'text',
          placeholder: '',
          single: true
        }, {
          label: '样板间任务名称',
          prop: 'modelRoomTaskName',
          type: 'text',
          placeholder: '',
          single: true
        }, {
          label: '客户编码',
          prop: 'customerCode',
          type: 'text',
          placeholder: ''
        },
        {
          label: '客户名称',
          prop: 'customerName',
          type: 'text',
          value: '',
          placeholder: ''
        }, {
          label: '所属办事处',
          prop: 'agencyName',
          type: 'dialog',
          value: '',
          config: {
            requestMethod: 'post', // 远程搜索请求方式:post,get;默认为get
            remote: true, // 远程搜索API地址
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'name'
            }, // api返回数据默认字段
            multiple: false,
            selectData: []
          },
          dialogConfig: {
            title: '办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            setting: [
              { prop: 'code', title: '编码' },
              { prop: 'name', title: '名称' }
            ]
          }
        }, {
          label: '异常性质', // YBJ_CONSTRUCTION_ABNORM_NATURE
          prop: 'exceptionNature',
          type: 'select',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            remoteUrl: `/data-dict/api/v2/dictionary/YBJ_CONSTRUCTION_ABNORM_NATURE`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }, {
          label: '异常类型',
          prop: 'exceptionType',
          type: 'select',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            remoteUrl: `/data-dict/api/v2/dictionary/YBJ_CONSTRUCTION_ABNORM_TYPE`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }, {
          label: '申请单位类别',
          prop: 'applyUnitType',
          type: 'select',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            remoteUrl: `/data-dict/api/v2/dictionary/APPLY_DEPARTMENT_TYPE`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }
      ],
      tableConfig: {
        hideSearchBar: true,
        sort: 'lastUpdateTime',
        order: 'desc',
        buttonGroupCode: 'default',
        apiHeader: {
          'Permission-perCode': 'abnormal',
          'Permission-App': 'slm'
        },
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/modelRoomExceptionTask/page`,
        pageSize: 20,
        tablePage: [20, 40, 60, 100],
        setting: [
          {
            prop: 'modelRoomTaskCode',
            label: '样板间任务编码'
          },
          {
            prop: 'modelRoomTaskName',
            label: '样板间任务名称'
          },
          {
            prop: 'bpmNumber',
            label: 'BPM流程号'
          },
          {
            prop: 'customerCode',
            label: '客户编码'
          },
          {
            prop: 'customerName',
            label: '客户名称'
          },
          {
            prop: 'agencyName',
            label: '所属办事处'
          },
          {
            prop: 'exceptionNature', // YBJ_CONSTRUCTION_ABNORM_NATURE
            label: '异常性质',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'YBJ_CONSTRUCTION_ABNORM_NATURE'
            }
          },
          {
            prop: 'exceptionType', // YBJ_CONSTRUCTION_ABNORM_TYPE
            label: '异常类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'YBJ_CONSTRUCTION_ABNORM_TYPE'
            }
          },
          {
            prop: 'orderNumber',
            label: '订单号'
          },
          {
            prop: 'accessory',
            label: '附件',
            overflowHidden: true,
            className: 'btn-green',
            clickFun: this.previewFile,
            isButton: true,
            formatData({ accessory }) {
              if (!accessory) return ''
              const pathArr = accessory.split('/')
              return pathArr[pathArr.length - 1]
            }
          },
          {
            prop: 'exceptionApplicantName',
            label: '异常申请人AD账号'
          },
          {
            prop: 'exceptionApplicantName',
            label: '异常申请人姓名'
          },
          {
            prop: 'exceptionApplyTime',
            label: '异常申请时间'
          },
          {
            prop: 'applyUnitType', // APPLY_DEPARTMENT_TYPE
            label: '申请单位类别',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'APPLY_DEPARTMENT_TYPE'
            }
          },
          {
            prop: 'modelRoomBuildStage',
            label: '样板间建设阶段',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'YBJ_CONSTRUCTION_STAGE'
            }
          },
          {
            prop: 'modelRoomDesignStep', // 缺字段
            label: '样板间设计进度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'YBJ_DESIGN_STEP'
            }
          },
          {
            prop: 'amount',
            label: '打款金额'
          },
          {
            prop: 'supposedAcceptanceTime',
            label: '应验收时间'
          },
          {
            prop: 'realAcceptanceTime',
            label: '实际验收时间'
          },
          {
            prop: 'supposedOrderTime',
            label: '应下单时间'
          },
          {
            prop: 'realOrderTime',
            label: '实际下单时间'
          },
          {
            prop: 'applyMsg',
            label: '申请说明'
          }
        ],
        btnList: [{
          buttonName: '导出',
          optCode: 'exports',
          outerFlag: true
        }]
      },
      showViewer: false,
      urlList: [],
      tableSelected: [],
      otherFilters: [],
      otherParams: {}
    }
  },
  methods: {
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
      this.urlList = []
    },
    previewFile(file) {
      this.urlList = []
      const path = file.accessory.replace('https://filedev.quanyou.com.cn/', '')
      const typeName = path.substring(path.lastIndexOf('.') + 1).toLowerCase()
      if (typeName === 'jpg' || typeName === 'jpeg' || typeName === 'png') {
      // 图片预览
        this.showViewer = true
        const picUrl = process.env.VUE_APP_IMG_PREFIX + '/' + path
        this.urlList.push(picUrl)
      } else if (typeName === 'pdf' || typeName === 'doc' || typeName === 'docx' || typeName === 'xlsx' || typeName === 'xls') {
        window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_IMG_PREFIX + path)
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    btnOperate(code) {
      switch (code) {
        case 'exports':
          console.log('exports')
          this.exportVisible = true
          break
        default:
          break
      }
    },
    selectChange(v) {
      this.tableSelected = v
    },
    exportConfig() {
      return [{
        code: 'export',
        name: '异常任务管理列表',
        dataApi: '/slm-admin/api/v1/modelRoomExceptionTask/export?type=0',
        selectedRows: this.tableSelected,
        queryField: 'id',
        filtersRaw: this.otherFilters,
        otherParams: this.otherParams
      }]
    },
    clearSearch() { },
    handleSearch(params) {
      this.otherFilters = params.filtersRaw
      this.otherParams = params.paramsRaw
      this.$nextTick(() => {
        this.$refs.refTable.initTableData('opCondition')
      })
    }
  }
}
</script>
<style scoped>
.query-form{
  margin-bottom:10px;
}
</style>
